<template>
  <div class="abnormalinfo">
        <ul class="abi-title">
        	  <li class="tab-title" v-for="item of titleList" :key="item.id">{{ item.titlename }}</li>
        </ul>

        <ul class="abi-table" v-for="item of tableList">
        	 <li class="tab-border" v-for="item of borderList"></li>
        </ul>  
        
        <div class="abi-data-wrapper">
	        <ul class="abi-data" v-for="item of list" :key="item.id">
	             <li class="tab-content ">{{item.machine}}</li>
	             <li class="tab-content ">{{item.time}}</li>
	             <li class="tab-content">{{item.person}}</li>
	             <li class="tab-content ">{{item.workstep}}</li>
	             <li class="tab-content ">{{item.abnormalinfo}}</li>
	        </ul>
        </div>
    
  </div>
</template>

<script>
export default {
  props:{
    list:Array
  },	
  data () {
    return {
    	  titleList:[
    	     {
    	     	id:"0001",
    	     	titlename:"机台"
    	     },
    	     {
    	     	id:"0002",
    	     	titlename:"时间"
    	     },
    	     {
    	     	id:"0003",
    	     	titlename:"操作人"
    	     },
    	     {
    	     	id:"0004",
    	     	titlename:"工步"
    	     },
    	     {
    	     	id:"0005",
    	     	titlename:"异常信息"
    	     },
    	  ],
    	  borderList:["1","2","3","4","5"],
    	  tableList:["1","2","3","4","5","6","7","8","9","10"]
    	  // list:[
       //      {
       //      	id:"000001",
       //      	machine:"33sss",
       //      	time:"2018/0607",
       //          person:"ssssddc",
       //          workstep:"上料",
       //          abnormalinfo:"xxxx"
       //      }

    	  // ]
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.abnormalinfo{
    width:100%;
	height:480px;
	position:relative;
}
	
.abi-title{
	height:44px;
	border:1px solid #26aab7;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	box-sizing:border-box;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
		
.abi-title .tab-title{
	width:20%;
	height:44px;
	line-height:44px;
	text-align:center;
	border-right:1px solid #26aab7;
	box-sizing:border-box;
}
			
.abi-table{
	width: 100%;
	height: 44px;
	border-left: 1px solid #26aab7;
	border-right: 1px solid #26aab7;
	border-bottom: 1px solid #26aab7;
	box-sizing:border-box;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.abi-table li{
	height: 44px;
	line-height:44px;
	width: 20%;
	border-right: 1px solid #26aab7;
	box-sizing:border-box;
	text-align:center;
}	
.abi-table li:last-child{
	border:none;
}
.abi-table:nth-child(11){
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}
	

.tab-title{
	font-size:30px;
	color:#fff;
}
	
.tab-content{
	font-size:24px;
	color:#26aab7;
}
.abi-data-wrapper{
	width:100%;
	height:440px;
	overflow:hidden;
	position:absolute;
	top:44px;
}
.abi-data{
	width:100%;
	height:44px;
	box-sizing:border-box;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
	
.abi-data li{
	height: 44px;
	line-height:44px;
	width: 20%;
	box-sizing:border-box;
	text-align:center;
}

</style>